<template>
  <div class="grid gap-y-5">
    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">确认收货</span>
      </div>
      <el-form
        ref="form"
        :model="form.data"
        :rules="form.rule"
        size="medium"
        label-width="7rem"
      >
        <el-row>
          <el-col
            :span="24"
          >
            <el-form-item
              label="商品编号"
              prop="gid"
            >
              <el-input
                v-model="form.data.gid"
                :style="{ width: '100%' }"
                @blur="onBlur"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
          >
            <el-form-item
              label="商品类型"
              prop="gtype"
            >
              <el-select
                v-model="form.data.gtype"
                :style="{ width: '100%' }"
                @change="onBlur"
              >
                <el-option
                  label="牲畜"
                  value="0"
                />
                <el-option
                  label="肉品"
                  value="1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-collapse-transition>
              <div
                v-show="collapse.i1.opened"
                class="ml-28 mb-6"
              >
                {{ collapse.i1.ename }} {{ collapse.i1.etype }}
              </div>
            </el-collapse-transition>
          </el-col>
          <el-col
            :span="24"
          >
            <el-form-item
              label="车牌号"
              prop="plate"
            >
              <el-input
                v-model="form.data.plate"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
          >
            <el-form-item
              label="其他信息"
              prop="info"
            >
              <el-input
                v-model="form.data.infp"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        class="ml-28"
        @click="submit"
      >
        添加
      </el-button>
    </el-card>

    <el-card
      class="collapse"
      :class="collapse.t1.opened ? 'opened' : 'closed'"
    >
      <div
        slot="header"
        @click="toggleColl('t1')"
      >
        <i class="el-icon-arrow-right font-bold" />
        <span class="ml-2 text-xl font-bold">购入订单列表</span>
      </div>
      <el-collapse-transition>
        <div
          v-show="collapse.t1.opened"
        >
          <div class="absolute top-0">
            123
          </div>
          <el-table
            :data="table.t1.data"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="confirmTime"
              label="时间"
            />
            <el-table-column
              prop="outEname"
              label="售出方"
            />
            <el-table-column
              prop="gid"
              label="货物编号"
            >
              <template slot-scope="scope">
                <a
                  :href="'/#/trace/'+hashids.encode(1*scope.row.gtype,1* scope.row.gid)"
                  class="text-blue-500 hover:underline"
                >{{ scope.row.gid }}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="gtype"
              label="货物类型"
            >
              <template slot-scope="scope">
                {{ scope.row.gtype === 0 ? '牲畜' : '肉品' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="plate"
              label="车牌号"
            />
            <el-table-column
              prop="info"
              label="其他信息"
            />
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>

    <el-card
      class="collapse"
      :class="collapse.t2.opened ? 'opened' : 'closed'"
    >
      <div
        slot="header"
        @click="toggleColl('t2')"
      >
        <i class="el-icon-arrow-right font-bold" />
        <span class="ml-2 text-xl font-bold">售出订单列表</span>
      </div>
      <el-collapse-transition>
        <div
          v-show="collapse.t2.opened"
        >
          <div class="absolute top-0">
            123
          </div>
          <el-table
            :data="table.t2.data"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="confirmTime"
              label="时间"
            />
            <el-table-column
              prop="inEname"
              label="购入方"
            />
            <el-table-column
              prop="gid"
              label="货物编号"
            >
              <template slot-scope="scope">
                <a
                  :href="'/#/trace/'+hashids.encode(1*scope.row.gtype,1* scope.row.gid)"
                  class="text-blue-500 hover:underline"
                >{{ scope.row.gid }}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="gtype"
              label="货物类型"
            >
              <template slot-scope="scope">
                {{ scope.row.gtype === 0 ? '牲畜' : '肉品' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="plate"
              label="车牌号"
            />
            <el-table-column
              prop="info"
              label="其他信息"
            />
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>

    <el-dialog
      :visible.sync="dialog"
      width="30%"
    >
      <div class="flex justify-evenly items-center">
        <div>{{ temp.msg }}</div>
        <div>
          <a
            :href="'/#/trace/' + temp.newHash"
            target="_blank"
            rel="noopener"
          >
            <img
              :src="temp.newQr"
              alt=""
            ></a>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="dialog = false"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Hashids from 'hashids'
import QRCode from 'qrcode'

export default {
  data () {
    return {
      hashids: new Hashids(),
      QRCode,
      dialog: false,
      collapse: {
        i1: {
          ename: '',
          etype: '',
          opened: false
        },
        t1: {
          opened: false,
          state: 0
        },
        t2: {
          opened: false,
          state: 0
        }
      },
      form: {
        data: {
          gid: undefined,
          gtype: undefined,
          plate: '',
          info: ''
        },
        rule: {
          gid: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          gtype: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        }
      },
      table: {
        t1: {
          data: [{
            confirmTime: '加载中'
          }]
        },
        t2: {
          data: [{
            confirmTime: '加载中'
          }]
        }
      },
      temp: {
        msg: undefined,
        newHash: undefined,
        newQr: undefined
      }
    }
  },
  methods: {
    onBlur () {
      if (this.form.data.gid && this.form.data.gtype) {
        this.collapse.i1.opened = false
        this.axios.get('/api/ent/order/lastPostion', {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            gid: this.form.data.gid,
            gtype: this.form.data.gtype
          }
        }).then(function (r) {
          this.collapse.i1.ename = r.data.detail.ename
          this.collapse.i1.etype = r.data.detail.etype
          this.collapse.i1.opened = true
        }.bind(this))
      } else {
        this.collapse.i1.opened = false
      }
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/order/confirm', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            gid: this.form.data.gid,
            gtype: this.form.data.gtype,
            plate: this.form.data.plate || undefined,
            info: this.form.data.info || undefined
          }
        }).then(function (r) {
          if (r.data.success) {
            this.temp.msg = r.data.msg
            console.log(1 * (this.form.data.gtype))
            const hash = this.hashids.encode(1 * this.form.data.gtype, 1 * this.form.data.gid)
            this.temp.newHash = hash

            QRCode.toDataURL(`${location.origin}/#/trace/${hash}`, { errorCorrectionLevel: 'H' }).then(function (url) {
              this.temp.newQr = url
            }.bind(this))

            this.dialog = true
          } else {
            this.$alert(r.data.msg)
          }
        }.bind(this))
      })
    },
    toggleColl (cid) {
      this.collapse[cid].opened = !this.collapse[cid].opened
      this.tryLoadData(cid)
    },
    tryLoadData (cid) {
      if (this.collapse[cid].opened) {
        if (!this.collapse[cid].loaded && !this.collapse[cid].loading) {
          this.collapse[cid].loading = true
          this.axios.get(`/api/ent/order/${cid === 't1' ? 'listIn' : 'listOut'}`, {
            headers: {
              token: this.$store.state.ent.token
            }
          }).then(function (r) {
            this.table[cid].data = r.data.detail
          }.bind(this)).finally(function () {
            this.collapse[cid].loaded = true
            this.collapse[cid].loading = false
          }.bind(this))
        }
      }
    }
  }
}
</script>
